// 引入组件的源文件
import Skeleton from './Skeleton/Skeleton.vue';
import Slider from './Slider/index.vue';
import More from './More/index.vue';
import Bread from './Bread/index.vue';
import BreadItem from './Bread/Item.vue';
import City from './City/index.vue';
import Count from './Count/index.vue';
import Button from './Button/index.vue';
import CheckBox from './CheckBox/index.vue';
import ImageView from './ImageView/index.vue';
import Sku from './Sku/index.vue';
import Dialog from './Dialog/index.vue';
import InfiniteLoad from './InfiniteLoad/index.vue';
import Tabs from './Tabs/index.vue';
import TabPane from './Tabs/pane.vue';
import defaultImg from '@/assets/images/200.png';
// 导入 vue 插件类型 和 vue 应用实例类型，用于 TS 类型校验
import type { Plugin, App } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';

// XtxUI 组件库插件
const XtxUI: Plugin = {
  // 插件安装钩子函数
  install(app: App) {
    // 全局注册组件
    app.component(`XtxSkeleton`, Skeleton);
    app.component(`XtxSlider`, Slider);
    app.component(`XtxMore`, More);
    app.component(`XtxBread`, Bread);
    app.component(`XtxBreadItem`, BreadItem);
    app.component(`XtxImageView`, ImageView);
    app.component(`XtxCity`, City);
    app.component(`XtxSku`, Sku);
    app.component(`XtxCount`, Count);
    app.component(`XtxButton`, Button);
    app.component(`XtxCheckBox`, CheckBox);
    app.component(`XtxDialog`, Dialog);
    app.component(`XtxTabs`, Tabs);
    app.component(`XtxTabPane`, TabPane);
    app.component(`XtxInfiniteLoad`, InfiniteLoad);
    // 图片加载
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            stop();
            el.src = value;
            el.onerror = () => {
              el.src = defaultImg;
            };
          }
        });
      },
    });
  },
};

// 默认导出组件库
export default XtxUI;

// 统一命名并导出，支持按需导入
// import { XtxButton, XtxSkeleton } from '@/components/XtxUI';
export { default as XtxSkeleton } from './Skeleton/Skeleton.vue';
export { default as XtxSlider } from './Slider/index.vue';
export { default as XtxMore } from './More/index.vue';
export { default as XtxBread } from './Bread/index.vue';
export { default as XtxBreadItem } from './Bread/Item.vue';
export { default as XtxCity } from './City/index.vue';
export { default as XtxCount } from './Count/index.vue';
export { default as XtxButton } from './Button/index.vue';
export { default as XtxCheckBox } from './CheckBox/index.vue';
export { default as XtxImageView } from './ImageView/index.vue';
export { default as XtxSku } from './Sku/index.vue';
export { default as XtxDialog } from './Dialog/index.vue';
export { default as XtxInfiniteLoad } from './InfiniteLoad/index.vue';
export { default as XtxTabs } from './Tabs/index.vue';
export { default as XtxTabPane } from './Tabs/pane.vue';

// XtxUI 导出 message 消息提示函数，由组件库统一管理
export { message } from './Message';
export { Confirm } from './Confirm';
